<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <style>
        .panel {
            background: #98bf21;
            height: 300px;
            width: 300px;
            position: absolute;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                const div = $("div");
                div.animate({left: "150px",}, "slow")
                div.animate({fontSize: "2em"}, 5000, function () {
                    $(".color").css("color", "red") //已修改，在字体放大之后改变字体颜色为红色

                })
            })
        })
    </script>
</head>
<body>
<button>开始动画</button>
<p>单一动画演示</p>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。
    如需对位置进行操作， 记得首先把元素的 CSS position 属性
    设置为 relative、fixed 或 absolute。</p>
<div class="panel">
    <p class="color">
        我动了，我又变红了
    </p>
</div>

</body>
</html>